<html>

<body>
    <script src="http://d3js.org/d3.v6.min.js"></script>
    <svg id=zero width=300 height=300></svg>
    <script>
        let dragrect = () => {
            let svg = d3.select('#zero')
            return d3.drag()
                .on("start", function (event, node) { //dragstart的监听器
                    console.log("拖曳开始");
                    event.sourceEvent.stopPropagation();
                })
                .on("end", function (d) {  //dragend的监听器
                    console.log("搁曳结束");
                    //d3.event.sourceEvent.stopPropagation();
                })
                .on("drag", function (event, node) {
                    //console.log(d);
                    console.log(d3.pointer(event, node));
                    let mx = event.x
                    let my = event.y
                    let dx = event.dx
                    let dy = event.dy

                    var t = d3.select(this);
                    console.log(t);
                    let ts = t.attr("transform")
                    let ns = ts.slice(10, ts.length - 1)
                    console.log(ns);
                    let tl = ns.split(',')
                    let nx = Number(tl[0]) + dx
                    let ny = Number(tl[1]) + dy
                    t.attr("transform", "translate(" + nx + "," + ny + ")")
                    //d3.event.sourceEvent.stopPropagation();
                })
        }
        svg = d3.select('#zero')
        let g = svg.append('g')
            .attr("transform", "translate(100,250)")
            .attr("style", "cursor:move")
            .on("mouseover", function (event) {
                var mouse = d3.event;
                console.log(event);

                //mouse.attr('cursor', 'hand')
            })
        g.append('text')
            .text('text')
            .attr("x", 25)
            .attr('y', 25)
            // .attr('text-anchor',"middle")
            .attr('dx', '-.8em')
            .attr('dy', '.35em')

        g.append('text')
            .text('text')
            .attr("x", 50)
            .attr('y', 50)
            .attr('text-anchor', "middle")
            .attr('dy', '.35em')

        g.append('line')
            .attr('x1', 25)
            .attr('y1', 25)
            .attr('x2', 50)
            .attr('y2', 50)
            .attr('stroke', 'black')
        g.call(dragrect())
    </script>
</body>

</html>